<template>
	<yd-layout id='faq' class=''>
		<div class="content">
			<yd-infinitescroll v-show='qa_list.length>0' :callback="getFaqList" ref="infinitescrollDemo">
				<div slot="list" class="list"  v-for="item,index in qa_list"  @click="goFaqDetail(item)">
					{{index+1}}、{{item.question}}
				</div>
				<!-- 数据全部加载完毕显示 -->
				<span slot="doneTip">没有更多数据了~~</span>

				<!-- 加载中提示，不指定，将显示默认加载中图标 -->
				<!--<img slot="loadingTip" src="path/img/loading.svg"/>-->
			</yd-infinitescroll>

			<img class="faq_img" @click="$router.push({name:'faqQuestion'})" src="../../assets/faq_1.png" alt="" />

			<NoList v-if='qa_list.length<=0'>
				<img slot='img' src="../../assets/byBookrack.png" alt="" />
			</NoList>
		</div>
	</yd-layout>
</template>

<script>
	import { InfiniteScroll } from 'vue-ydui/dist/lib.rem/infinitescroll';
	export default {
		components: {
			[InfiniteScroll.name]: InfiniteScroll,
		},
		data() {
			return {
				pageNum: 1,
				pageCount: 10,
				qa_list: [],
				qa_total: 0,
			}
		},
		created() {},
		watch: {

		},
		computed: {

		},
		mounted() {
			document.title = '常见问题'
			this.getFaqList()
		},
		methods: {
			goFaqDetail(item) {
				this.$router.push({
					name: 'faqDetail',
					query:{
						id:item.id
					}
				})
			},
			getFaqList() {
				this.$root.ajax({
					name: 'Qa/lst',
					params: {
						page: this.pageNum,
						count: this.pageCount,
					}
				}).then((d) => {
					
					this.qa_list = [...this.qa_list, ...d.data.qa_list];
                    if (this.qa_list.length >= d.data.qa_total ) {
                        /* 所有数据加载完毕 */
                        this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.loadedDone');
                        return;
                    }

                    /* 单次请求数据完毕 */
                    this.$refs.infinitescrollDemo.$emit('ydui.infinitescroll.finishLoad');

                    this.pageNum++;
				})
			}
		}
	}
</script>

<style lang="scss">
	@import './faq.scss';
</style>